<template>
  <div class="user-cloud">
    <div class="user-cloud-title">
      上云系统
      <!-- <img @click="goMore" src="../../../assets/userindex/more.png" style="margin-left: 160px;"> -->
    </div>
    <div style="display: flex;">
      <div
        class="user-cloud-item"
        @click="goMore"
      >
        <div class="user-cloud-type">
          <div/>
          系统个数
        </div>
        <div class="user-cloud-num">
          <div>{{total}}</div>
        </div>
       <div class="user-cloud-dw">
         个
        </div>
      </div>


      <div
        v-if="flag"
        id="user-cloud-echart"
        :style="{ width: '83%', height: '265px' }"
      ></div>
    </div>

  </div>
</template>

<script>
import { cloudUpListMine } from "@/api/cloud/cloud.js";
var option = null;
export default {
  name: "userIndex",
  components: {},
  data() {
    return {
      flag: true,
      list: [],
      total:0,
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.getData();
    // window.addEventListener("resize", () => {
    //   this.draw();
    // });
  },
  methods: {
    getData() {
      cloudUpListMine({
        pageNum: 1,
        pageSize: 3,
        resStatusList: [0, 1],
      }).then((res) => {
        if (res.success) {
          this.total=res.total
          this.seting(res.rows);
          // this.total = res.total
          // this.list = res.rows
        }
      });
    },
    seting(data) {
      option = {
        animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        color: ["#2e76ff", "#45c6fc", "#ff6161", "#f5d900", "#7d7d7d"],
        xAxis: {
          type: "category",
          data: [],
        },
        legend: {
          data: ["云服务器", "存储"],
        },
        yAxis: {
          type: "value",
        },
        grid:{
          top:'15%',//距上边距
          right:'5%',//距上边距
        },
        series: [
          {
            name: "云服务器",
            data: [],
            type: "bar",
            barWidth: "32px",
            label: {
              show: true,
              position: "inside",
            },
          },
          {
            name: "存储",
            data: [],
            type: "bar",
            barWidth: "32px",
            label: {
              show: true,
              position: "inside",
            },
          },
        ],
      };
      data.forEach((item) => {
        if (item.parentProjectname.length > 10) {
          item.parentProjectname = item.parentProjectname.replace(
            /(\S{10})(.*)/,
            "$1\n$2"
          );
          // item.parentProjectname = item.parentProjectname.substring(0,8)
          // item.parentProjectname.substring(0, 10) + "...";
        }
        option.xAxis.data.push(item.parentProjectname);
        option.series[0].data.push(item.costReport.ecsCount);
        option.series[1].data.push(item.costReport.romCount);
      });
      this.draw();
    },
    draw() {
      if (!option) {
        return;
      }
      this.flag = false;
      setTimeout(() => {
        this.flag = true;
        setTimeout(() => {
          let myChart = this.$echarts.init(
            document.getElementById("user-cloud-echart")
          );
          myChart.setOption(option);
        }, 10);
      }, 10);
    },
    goMore() {
      this.$router.push({
        path: "/cloud/cloudapply",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.user-cloud {
  margin: 20px 0px 0 0px;
  background: white;
  border-radius: 6px;
  padding: 16px 16px 40px 16px;
  width: 48%;
  width: 700px;
  height: 284px;
  .user-cloud-title {
    border-left: 3px solid rgb(138, 205, 255);
    font-weight: bold;
    padding-left: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
  .user-cloud-item:hover{
    background-color:#ffebcb;
  }
  .user-cloud-item {
    cursor: pointer;
    border-radius: 6px;
    height: 180px;
    width: 17%;
    padding: 3%;
    margin-top: 35px;
    background-color:#e0f6ff;
    .user-cloud-type {
      display: flex;
      div {
        background-color: #007afb;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        margin: 6px 4px 0 0;
      }
    }
    .user-cloud-num {
      margin: 26px 0;
      color: #007afb;
      display: flex;
      line-height: 50px;
      justify-content: center;
      div {
        font-size: 38px;
        font-weight: bold;
        margin: 0 10px;
      }
    }
    .user-cloud-dw {
      text-align: center;
      font-weight: bold;
      font-size: 18px;
    }
  }


  .user-cloud-warp {
    display: flex;
    justify-content: space-between;

    .user-cloud-item {
      background: rgb(249, 249, 255);
      border-radius: 6px;
      width: 31%;

      .user-cloud-name {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background: rgb(175, 184, 225);
        color: rgb(87, 95, 145);
        text-align: center;
        line-height: 30px;
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .user-cloud-data {
        color: rgb(87, 95, 145);
        text-align: center;
        margin-top: 26px;
      }

      .user-cloud-time {
        text-align: center;
        line-height: 40px;
        margin-top: 16px;
        border-top: 2px dashed rgb(198, 198, 197);
        color: rgb(150, 169, 221);
      }
    }
  }
  .user-cloud-img {
    padding: 10px 0 0 0;
    text-align: center;
  }
}
</style>
